
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg>
                    <div class="name">保障</div>
                    <div class="fontclass">#icon-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye1"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-shouye1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye2"></use>
                    </svg>
                    <div class="name">家人</div>
                    <div class="fontclass">#icon-shouye2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye3"></use>
                    </svg>
                    <div class="name">完成</div>
                    <div class="fontclass">#icon-shouye3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye4"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="fontclass">#icon-shouye4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye5"></use>
                    </svg>
                    <div class="name">药丸</div>
                    <div class="fontclass">#icon-shouye5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye6"></use>
                    </svg>
                    <div class="name">问诊</div>
                    <div class="fontclass">#icon-shouye6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye7"></use>
                    </svg>
                    <div class="name">商城</div>
                    <div class="fontclass">#icon-shouye7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye8"></use>
                    </svg>
                    <div class="name">定位</div>
                    <div class="fontclass">#icon-shouye8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye9"></use>
                    </svg>
                    <div class="name">商店</div>
                    <div class="fontclass">#icon-shouye9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye10"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-shouye10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye11"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shouye11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye12"></use>
                    </svg>
                    <div class="name">美容</div>
                    <div class="fontclass">#icon-shouye12</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye13"></use>
                    </svg>
                    <div class="name">医生</div>
                    <div class="fontclass">#icon-shouye13</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye14"></use>
                    </svg>
                    <div class="name">询问</div>
                    <div class="fontclass">#icon-shouye14</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye15"></use>
                    </svg>
                    <div class="name">扫码</div>
                    <div class="fontclass">#icon-shouye15</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye16"></use>
                    </svg>
                    <div class="name">历史记录</div>
                    <div class="fontclass">#icon-shouye16</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye17"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-shouye17</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye18"></use>
                    </svg>
                    <div class="name">相机</div>
                    <div class="fontclass">#icon-shouye18</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye19"></use>
                    </svg>
                    <div class="name">鲜花</div>
                    <div class="fontclass">#icon-shouye19</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye20"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#icon-shouye20</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye21"></use>
                    </svg>
                    <div class="name">卡包</div>
                    <div class="fontclass">#icon-shouye21</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye22"></use>
                    </svg>
                    <div class="name">血压</div>
                    <div class="fontclass">#icon-shouye22</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye23"></use>
                    </svg>
                    <div class="name">提醒</div>
                    <div class="fontclass">#icon-shouye23</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye24"></use>
                    </svg>
                    <div class="name">运动</div>
                    <div class="fontclass">#icon-shouye24</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye25"></use>
                    </svg>
                    <div class="name">优惠卡</div>
                    <div class="fontclass">#icon-shouye25</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye26"></use>
                    </svg>
                    <div class="name">钻石</div>
                    <div class="fontclass">#icon-shouye26</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye27"></use>
                    </svg>
                    <div class="name">药箱</div>
                    <div class="fontclass">#icon-shouye27</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye28"></use>
                    </svg>
                    <div class="name">病历</div>
                    <div class="fontclass">#icon-shouye28</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye29"></use>
                    </svg>
                    <div class="name">诊断记录</div>
                    <div class="fontclass">#icon-shouye29</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye30"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-shouye30</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye31"></use>
                    </svg>
                    <div class="name">联系人</div>
                    <div class="fontclass">#icon-shouye31</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye32"></use>
                    </svg>
                    <div class="name">药瓶</div>
                    <div class="fontclass">#icon-shouye32</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye33"></use>
                    </svg>
                    <div class="name">活动</div>
                    <div class="fontclass">#icon-shouye33</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye34"></use>
                    </svg>
                    <div class="name">天气</div>
                    <div class="fontclass">#icon-shouye34</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye35"></use>
                    </svg>
                    <div class="name">血糖</div>
                    <div class="fontclass">#icon-shouye35</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye36"></use>
                    </svg>
                    <div class="name">咨询</div>
                    <div class="fontclass">#icon-shouye36</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye37"></use>
                    </svg>
                    <div class="name">疫苗</div>
                    <div class="fontclass">#icon-shouye37</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye38"></use>
                    </svg>
                    <div class="name">中医药</div>
                    <div class="fontclass">#icon-shouye38</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye39"></use>
                    </svg>
                    <div class="name">幼儿</div>
                    <div class="fontclass">#icon-shouye39</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye40"></use>
                    </svg>
                    <div class="name">地址</div>
                    <div class="fontclass">#icon-shouye40</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye41"></use>
                    </svg>
                    <div class="name">视频问诊</div>
                    <div class="fontclass">#icon-shouye41</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye42"></use>
                    </svg>
                    <div class="name">进行中</div>
                    <div class="fontclass">#icon-shouye42</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye43"></use>
                    </svg>
                    <div class="name">个性化</div>
                    <div class="fontclass">#icon-shouye43</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye44"></use>
                    </svg>
                    <div class="name">已就诊</div>
                    <div class="fontclass">#icon-shouye44</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye45"></use>
                    </svg>
                    <div class="name">待就诊</div>
                    <div class="fontclass">#icon-shouye45</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye46"></use>
                    </svg>
                    <div class="name">付款</div>
                    <div class="fontclass">#icon-shouye46</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye47"></use>
                    </svg>
                    <div class="name">服务中</div>
                    <div class="fontclass">#icon-shouye47</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye48"></use>
                    </svg>
                    <div class="name">已取消</div>
                    <div class="fontclass">#icon-shouye48</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon1"></use>
                    </svg>
                    <div class="name">浏览</div>
                    <div class="fontclass">#icon-icon1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon2"></use>
                    </svg>
                    <div class="name">赞</div>
                    <div class="fontclass">#icon-icon2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon3"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-icon3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon4"></use>
                    </svg>
                    <div class="name">说明</div>
                    <div class="fontclass">#icon-icon4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon5"></use>
                    </svg>
                    <div class="name">步数</div>
                    <div class="fontclass">#icon-icon5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon6"></use>
                    </svg>
                    <div class="name">积分</div>
                    <div class="fontclass">#icon-icon6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon7"></use>
                    </svg>
                    <div class="name">叶子</div>
                    <div class="fontclass">#icon-icon7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon8"></use>
                    </svg>
                    <div class="name">元宝</div>
                    <div class="fontclass">#icon-icon8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon9"></use>
                    </svg>
                    <div class="name">汽车</div>
                    <div class="fontclass">#icon-icon9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon10"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-icon10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon11"></use>
                    </svg>
                    <div class="name">全科</div>
                    <div class="fontclass">#icon-icon11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon12"></use>
                    </svg>
                    <div class="name">外科</div>
                    <div class="fontclass">#icon-icon12</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon13"></use>
                    </svg>
                    <div class="name">内科</div>
                    <div class="fontclass">#icon-icon13</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon14"></use>
                    </svg>
                    <div class="name">骨科</div>
                    <div class="fontclass">#icon-icon14</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon15"></use>
                    </svg>
                    <div class="name">口腔科</div>
                    <div class="fontclass">#icon-icon15</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon16"></use>
                    </svg>
                    <div class="name">奖杯</div>
                    <div class="fontclass">#icon-icon16</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon17"></use>
                    </svg>
                    <div class="name">完成</div>
                    <div class="fontclass">#icon-icon17</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon18"></use>
                    </svg>
                    <div class="name">生活</div>
                    <div class="fontclass">#icon-icon18</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon19"></use>
                    </svg>
                    <div class="name">特色</div>
                    <div class="fontclass">#icon-icon19</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon20"></use>
                    </svg>
                    <div class="name">饮食</div>
                    <div class="fontclass">#icon-icon20</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-2"></use>
                    </svg>
                    <div class="name">摄像头反转</div>
                    <div class="fontclass">#icon-2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon21"></use>
                    </svg>
                    <div class="name">耳鼻喉科</div>
                    <div class="fontclass">#icon-icon21</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon22"></use>
                    </svg>
                    <div class="name">精神科</div>
                    <div class="fontclass">#icon-icon22</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon23"></use>
                    </svg>
                    <div class="name">皮肤科</div>
                    <div class="fontclass">#icon-icon23</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon24"></use>
                    </svg>
                    <div class="name">退款</div>
                    <div class="fontclass">#icon-icon24</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon25"></use>
                    </svg>
                    <div class="name">女</div>
                    <div class="fontclass">#icon-icon25</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon26"></use>
                    </svg>
                    <div class="name">男</div>
                    <div class="fontclass">#icon-icon26</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon27"></use>
                    </svg>
                    <div class="name">热度</div>
                    <div class="fontclass">#icon-icon27</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon28"></use>
                    </svg>
                    <div class="name">拔罐</div>
                    <div class="fontclass">#icon-icon28</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon29"></use>
                    </svg>
                    <div class="name">血脂</div>
                    <div class="fontclass">#icon-icon29</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon30"></use>
                    </svg>
                    <div class="name">睡眠</div>
                    <div class="fontclass">#icon-icon30</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon31"></use>
                    </svg>
                    <div class="name">文本</div>
                    <div class="fontclass">#icon-icon31</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon32"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-icon32</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon33"></use>
                    </svg>
                    <div class="name">体重</div>
                    <div class="fontclass">#icon-icon33</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon34"></use>
                    </svg>
                    <div class="name">蓝牙</div>
                    <div class="fontclass">#icon-icon34</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon35"></use>
                    </svg>
                    <div class="name">输入</div>
                    <div class="fontclass">#icon-icon35</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon36"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-icon36</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon37"></use>
                    </svg>
                    <div class="name">设备</div>
                    <div class="fontclass">#icon-icon37</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon38"></use>
                    </svg>
                    <div class="name">化学</div>
                    <div class="fontclass">#icon-icon38</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon39"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-icon39</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
